<template>
    <!-- <van-checkbox class="my-checkbox" v-model="modelValue" shape="square" @change="setStatus" :disabled="disabled">
        <slot/>
    </van-checkbox> -->
    <div class="myCheckBox">
        <div class="cbox">
            <input type="checkbox" v-model="cval" @change="setStatus" :disabled="disabled"/>
            <i></i>
        </div>
        <div class="txt" @click="onclick"><slot/></div>
    </div>
</template>

<script>
import { reactive,toRefs,getCurrentInstance } from 'vue'
import {useRoute,useRouter} from 'vue-router'
import { useStore } from 'vuex'
import {Checkbox as vanCheckbox} from 'vant'
export default {
    props:{
        modelValue:Boolean,
        disabled:{
            type:Boolean,
            default:false
        }
    },
    components:{
       vanCheckbox 
    },
    setup(props,context){
        const router = useRouter()
        const route = useRoute()
        const store = useStore()
        const {proxy} = getCurrentInstance()

        const state = reactive({
            cval:props.modelValue
        })
        const setStatus = e=>{
            context.emit('update:modelValue', state.cval)
        }
        const onclick = ()=>{
            if(!props.disabled ){
                state.cval = !state.cval
                context.emit('update:modelValue', state.cval)
            }  
        }

        return{
            ...toRefs(state),
            setStatus,
            onclick
        }
    }
}
</script>
<style lang="scss" scoped>
    .myCheckBox{
        display: inline-flex;
        height: 40px;
        line-height: 40px;
        overflow: hidden;
        .cbox{
            position: relative;
            z-index: 100;
            width: 30px;
            height: 30px;
            margin: 5px 10px 0 0;
            input{
                position: absolute;
                left: 0;
                top: 0;
                z-index: 100;
                width: 100%;
                height: 100%;
                border: 0;
                background: 0;
                opacity: 0;
                &:checked+i{
                    background-image: url('/images/cb2.png');
                }
                &:disabled +i{
                    opacity: 0.4;
                }
            }
            i{
                position: absolute;
                z-index: 99;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                background: url('/images/cb1.png') left top no-repeat;
                background-size:100% 100% ;
            }
        }
        .txt{
            line-height: normal;
        }
    }
</style>

<style lang="scss">
    .my-checkbox .van-checkbox__icon .van-icon{
        height: 30px;
        width: 30px;
        border-radius:4px;
        font-size: 28px !important;
        margin: 5px 0 0 0;
    }
    .my-checkbox .van-checkbox__icon--checked .van-icon{
        background: #fff;
        color: #0E6161;
        line-height: normal;
    }
    .my-checkbox .van-checkbox__label{
        color: #fff;
    }
</style>